<template>
	<div>
    <el-table :data="tableData.data"
      :stripe=tableConfig.stripe
      :max-height=tableConfig.maxHeight
      @selection-change="handleSelectionChange"
    >
      <!-- 选项栏 -->
      <el-table-column v-if="tableConfig.hasSelectionRole" type="selection" width="55"></el-table-column>
      <!-- 正文栏 -->
      <el-table-column
        v-for="column in tableData.columns"
        :key="column.label"
        :label="column.label"
        :prop="column.prop"
        :align="column.align"
        :sortable="column.sortable"
        :showOverflowTooltip="column.showOverflowTooltip"
      >
      </el-table-column>
      <!-- 操作栏 -->
      <el-table-column v-if="opWidth > 0" label="操作" align="center" fixed="right" :width="opWidth">
        <template #default="scope">
          <template  v-for="btn in tableConfig.button">
            <el-button :key="btn" v-if="'edit'=== btn" size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
              <el-icon class="icon"><elementEdit /></el-icon> 
              <span class="icon-font"> 编辑</span>
            </el-button>
            <el-button :key="btn" v-if="'del'=== btn" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
              <el-icon class="icon"><elementDelete /></el-icon>
              <span class="icon-font"> 删除</span>
            </el-button>
          </template>
        </template>
      </el-table-column>
		</el-table> 
	</div>
</template>

<script>
import { ref } from 'vue';
export default {
	name: 'TableTemplate',
  props: {
    tableData: { // 表单数据
      type: Object,
      default: () =>{
        return {
          columns: [],
          data: []
        }
      }
    },
    tableConfig: { // 表格样式
      type: Object,
      default: () =>{
        return {}
      }
    },
  },
	setup(props,{ emit }) {
    const multipleSelection = ref([])

    const opWidth = props.tableConfig.button.length * 100

    const handleEdit = (index, row) => {
      emit('handleEdit',index,row)
    }
    const handleDelete = (index, row) => {
      emit('handleDelete',index,row)
    }
    const handleSelectionChange = (val) =>{
      multipleSelection.value = val
    }

		return {
      handleEdit,
      handleDelete,
      handleSelectionChange,
      multipleSelection,
      opWidth
    };
	},
};
</script>

<style lang="scss" scoped>
.icon{
  width: 15px;
  height: 15px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
.icon-font{
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
</style>
